// 加载完时，body{opacity: 1}
document.addEventListener('DOMContentLoaded', function() {
    document.body.className = 'active';
})
//banner区域
sendAxios('https://pcapi-xiaotuxian-front.itheima.net/home/banner').then(data=>{
    console.log(data)
    const imgArray = data.result;
    const img = document.querySelectorAll('.iot_banner img');
    for (let i = 0 ; i < 5 ; i++){
        img[i].src = imgArray[i].imgUrl;
        img[i].id = imgArray[i].id;
    }
})

// 分类内容跳转
function optionJump(index){
    contentBox.innerHTML = '';
    for (let i = 0; i < 9; i++){
        option[i].className = '';
    }
    option[index].className = 'iot_opted';
    sendAxios('https://pcapi-xiaotuxian-front.itheima.net/category/top').then(data=>{
        for(let i = 0; i < data.result[index].children.length; i++){
            const up = document.createElement('div')
            up.className = 'iot_up';
            up.innerHTML = '<span></span><span>全部</span>';
            const name = up.querySelector('span');
            name.innerHTML = data.result[index].children[i].name;
            contentBox.appendChild(up);
            const down = document.createElement('div');
            down.className = 'iot_down';
            contentBox.appendChild(down);
            for (let j = 0; j < data.result[index].children[i].goods.length; j++){
                const  single = document.createElement('a');
                single.className = 'iot_single';
                single.innerHTML = '<img src="" alt=""><p></p><p></p>'
                const img = single.querySelector('img');
                img.id = data.result[index].children[i].goods[j].id;
                img.src = data.result[index].children[i].goods[j].picture;
                img.addEventListener('click', function(event) { 
                    const id = this.id; 
                    console.log(id);
                    sendMessage(id,0);
                }); 
                const p = single.querySelectorAll('p');
                p[0].innerHTML = data.result[index].children[i].goods[j].name;
                p[1].innerHTML = '￥'+data.result[index].children[i].goods[j].
                price;
                down.appendChild(single);
            }
            
        }
    })
    
}
let contentBox = null;
let option = null;
document.addEventListener('DOMContentLoaded', function() { 
    contentBox = document.querySelector('.iot_contentBox');
    option = document.querySelectorAll('.iot_option div');
    //首次加载
    sendAxios('https://pcapi-xiaotuxian-front.itheima.net/category/top').then(data=>{
        for (let i = 0; i < 9; i++){
            option[i].innerHTML = data.result[i].name;
        }
    })
    optionJump(0);
})
